<template>
  <div class="comment">
    <div class="data">
      <img :src="baseUrl + data.author.avatar" @click="onreply()" />
      <div class="user">
        <div class="nickname">{{ data.author.nickname }}</div>
        <div class="time">{{ data.created | dateStyleOne }}</div>
      </div>
      <div class="zan" :class="{ red: isLike }" @click="comLike">
        {{ data.star }}
        <i class="iconfont iconbtn_dianzan_small_nor"></i>
      </div>
    </div>
    <div class="main">
      <p>{{ data.content }}</p>
      <div class="reply" v-if="data.children_comments.length">
        <div
          class="item"
          v-for="(item, index) in data.children_comments"
          :key="index"
        >
          <span>{{ item.author }}</span
          >: <span>{{ item.content }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { setLocal } from '@/utils/local.js'
// 导入接口
import { apiExComStar } from '@/api/find.js'
export default {
  props: ['data', 'isLike'],
  data () {
    return {
      baseUrl: process.env.VUE_APP_URL,
      starComments: [] // 用户点赞评论列表
    }
  },
  methods: {
    onreply () {
      this.$parent.$parent.$refs.reply.type = 'com'
      this.$parent.$parent.$refs.reply.show = true
      this.$parent.$parent.$refs.reply.data = this.data
    },
    async comLike () {
      const res = await apiExComStar(this.data.id)
      this.data.star = res.data.num
      const obj = this.$store.state.userInfo
      obj.starComments = res.data.list // 保存到vuex
      this.$emit('change', res.data.list)
      setLocal(obj, 'userInfo') // 保存到本地
    }
  }
  // mounted () {
  //   console.log(this.data)
  //   // 获取用户评论点赞列表
  //   // this.starComments = this.$store.state.userInfo.starComments
  //   // console.log('评论', this.starComments)
  //   // 保存信息
  //   // 获取用户再赞评论列表
  // }
}
</script>

<style lang="less" scoped>
.comment {
  // 加红
  .red {
    color: red !important;
    .iconfont {
      color: red !important;
    }
  }
  .data {
    display: flex;
    align-items: center;
    img {
      width: 35px;
      height: 35px;
      border-radius: 50%;
      margin-right: 10px;
    }
    .user {
      flex: 1;
      .nickname {
        font-size: 14px;
      }
      .time {
        font-size: 12px;
        color: #b4b4bd;
      }
    }
    .zan {
      color: #b4b4bd;
      /deep/.iconbtn_dianzan_small_nor:before {
        font-size: 28px;
      }
    }
  }
  .main {
    // height: 125px;
    margin-left: 45px;
    p {
      margin-top: 10px;
      padding: 12px 0;
    }
    .reply {
      background-color: #f7f4f5;
      font-size: 14px;
      padding: 12px 15px;
    }
  }
}
</style>
